<template>
  <div class="login-container">
    <div class="language-selector">
      <!-- <el-select style="width: 90px" size="small" v-model="selectedLanguage" @change="changeLanguage">
        <el-option v-for="item in languageOptions" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select> -->
      <el-button
        style="width: 70px;margin-left: 10px;"
        size="small"
        round
        @click="signIn"
        >{{ $t("login.signIn") }}</el-button
      >
      <el-button style="width: 70px" size="small" round @click="register">{{
        $t("login.register")
      }}</el-button>
    </div>
    <el-card class="login-card">
      <div>
        <div class="login-title">{{ $t("login.title") }}</div>
      </div>
      <div>
        <div class="login-text">{{ $t("login.loginText") }}</div>
      </div>
      <el-form
        style="width: 100%;"
        :rules="rules"
        label-position="top"
        label-width="80px"
        ref="loginForm"
        :model="form"
      >
        <el-form-item :label="$t('login.userName')" prop="account">
          <el-input
            v-model="form.account"
            :placeholder="$t('login.userNamePlaceholder')"
            maxlength="50"
            show-word-limit
            clearable
            style="margin-bottom: 25px;width: 100%;"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="password">
          <el-input
            v-model="form.password"
            :placeholder="$t('login.passwordPlaceholder')"
            maxlength="50"
            show-password
            style="margin-bottom: 25px;width: 100%;"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="login-remember">
        <el-checkbox style="margin-left: 10px" v-model="form.rememberMeOne">{{
          $t("login.rememberMe")
        }}</el-checkbox>
        <router-link class="common-link" to="/forgot">{{
          $t("login.forgotPassword")
        }}</router-link>
      </div>
      <el-row>
        <el-col :span="24">
          <el-button
            :loading="loginLoading"
            @keyup.enter="submitForm"
            @click="submitForm"
            style="background-color: #febc1c; color: black; width: 100%"
            >{{ $t("login.loginText") }}</el-button
          >
        </el-col>
      </el-row>
      <!-- <div class="social-login">
        <el-button plain @click="googleLogin" class="google-button">
          <span class="icon"></span>
        </el-button>
        <el-button plain @click="appleLogin" class="apple-button">
          <span class="icon"></span>
        </el-button>
        <el-button plain @click="facebookLogin" class="facebook-button">
          <span class="icon"></span>
        </el-button>
      </div> -->
      <div class="login-bottom-text">
        <span>{{ $t("login.registerText") }}&nbsp;</span>
        <router-link class="common-link" to="/register">{{
          $t("login.register")
        }}</router-link>
      </div>
    </el-card>
  </div>
</template>

<script>
import { postPasLogin } from "../../api/userService";
import qs from "qs";

export default {
  data() {
    return {
      form: {
        account: "",
        password: "",
        rememberMe: 2,
        rememberMeOne: false
      },
      rules: {
        account: [
          {
            required: true,
            message: this.$t("login.emailPlaceholder"),
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: this.$t("login.passwordPlaceholder"),
            trigger: "blur"
          }
        ]
      },
      selectedLanguage: "en",
      languageOptions: [
        { value: "en", label: "English" },
        { value: "zh", label: "中文" }
      ],
      loginLoading: false
    };
  },
  methods: {
    submitForm() {
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          this.handleLogin();
        } else {
          return false;
        }
      });
    },
    async handleLogin() {
      this.loginLoading = true;

      if (this.form.rememberMeOne) {
        this.form.rememberMe = 1;
      }
      var res = await postPasLogin(this.form);
      if (res && res.code == 200) {
        localStorage.setItem("satoken", res.data.token);
        localStorage.setItem("userInfo", qs.stringify(res.data));
        this.$router.push("./home");
      } else if (res && res.code != 200) {
        this.loginLoading = false;
        this.$message.error(res.msg);
      } else {
        this.loginLoading = false;
        this.$message.error("Service exception");
      }
    },
    googleLogin() {
      // Handle Google login logic here
      console.log("Google login button clicked");
    },
    appleLogin() {
      // Handle Apple login logic here
      console.log("Apple login button clicked");
    },
    facebookLogin() {
      // Handle Facebook login logic here
      console.log("Facebook login button clicked");
    },
    changeLanguage(e) {
      this.$nextTick(() => {
        localStorage.setItem("lang", e);
        this.$i18n.locale = e;
      });
    },
    register(e) {
      this.$router.push("/register");
    },
    signIn() {
      this.$router.push("/login");
    },
    handleKeyup(event) {
      if (event.key === "Enter") {
        this.submitForm();
      }
    }
  },
  mounted() {
    // 页面刷新后默认语言为英语
    localStorage.removeItem("lang");
    localStorage.setItem("lang", "en");
    // 监听键盘事件
    window.addEventListener("keyup", this.handleKeyup);
  },
  beforeDestroy() {
    // 清理事件监听
    window.removeEventListener("keyup", this.handleKeyup);
  }
};
</script>

<style scoped>
::v-deep .select-popper .el-input__inner {
  border-radius: 15px;
}

@import "../../assets/css/LoginPage.css";

@media (max-width: 600px) {
  .el-form {
    width: 100%;
  }
}
</style>
